<template>
	<view class="free_curriculum">

		<!-- <navigator class="free_curriculum"> -->

			<image :src="courseInfo.picture" mode="aspectFill"></image>
			<view class="">{{courseInfo.courseName}}</view>
			<view class="icon">入门 <text class="icon-renwu"></text></view>
			<view class="">免费</view>
			<!-- <view class="">
				加入课程
			</view> -->
		<!-- </navigator> -->
	</view>
</template>

<script setup>
	defineProps({
		courseInfo: {
			type: Object,
			default () {
				return {
					courseName: "默认名称",
					picture: "../../static/images/banner/banner1.jpg",
				}
			}
		}
	})
	// const to_video = () => {
	// 	uni.navigateTo({
	// 		url: "/pages/video/video?"
	// 	})
	// }
</script>

<style lang="scss" scoped>
	.free_curriculum {
		padding: 15rpx 30rpx;
		height: 200rpx;
		border-bottom: 1rpx solid rgba(128, 128, 128, 0.1);
		// border-radius: 10rpx;
		// background-color: ghostwhite;
		// :nth-child(1){
		// 	margin:30rpx 0rpx 0rpx 0rpx;
		// }
	}

	.free_curriculum image {
		width: 40%;
		height: 180rpx;
		float: left;
		margin-right: 20rpx;
		// box-shadow: 0rpx 0rpx 5rpx 5rpx #dddddd;
		border-radius: 10rpx;
	}

	.free_curriculum view:nth-of-type(1) {
		margin-top: 20rpx;
		font-weight: 700;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.free_curriculum view:nth-of-type(2),
	.free_curriculum view:nth-of-type(3) {
		color: #808080;
		font-size: 25rpx;
		margin-top: 20rpx;
	}
</style>